* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.title,
.content {
  text-align: center;
  line-height: 60px;
  font-size: 1.5em;
  height: 60px;
}

.keybord {
  width: 1300px;
  height: 340px;
  margin: 100px auto;
  border: 1px solid #ccc;
  display: grid;
  grid-template-columns: 5fr 2fr 3fr;
  grid-template-rows: 1f1;
  gap: 20px;
  background-color: #020001;
  padding: 5px;
  box-shadow:
    2.5px 1.7px 2.9px rgba(0, 0, 0, 0.055),
    6.4px 4.5px 7px rgba(0, 0, 0, 0.081),
    14.6px 10.3px 16.3px rgba(0, 0, 0, 0.105),
    58px 41px 80px rgba(0, 0, 0, 0.15);

}

.keybord .left {
  display: grid;
  grid-template-columns: repeat(16, 50px);
  grid-template-rows: repeat(4, 50px);
  gap: 5px;

}

.keybord .left .row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
}

/* 公共布局 */
.keybord .left li,
.keybord .midel .row li,
.keybord .rigth li {
  list-style: none;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: red;
  border-radius: 9px;
  transition: all 0.5s;
  background: linear-gradient(145deg, #000, #000);
  box-shadow: -1px 3px 14px #cdcaca, 2px 1px 1px #ffffff;
}

/* 中间 */
.keybord .midel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;

}

.keybord .midel .row {
  display: grid;
  gap: 5px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.keybord .midel .row1 {
  font-size: 12px;
}

/* 右侧 */
.keybord .rigth {
  gap: 5px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

.tow {
  grid-column-start: span 2;

}

.three {
  grid-column-start: span 3;
}

.ninth {
  grid-column-start: span 9;
}

.keybord .rigth .rightBack {
  grid-row-start: span 2;
  line-height: 100px;
}

.min {
  font-size: 12px;
}

.blank {
  background: transparent !important;
  box-shadow: none !important;
}

.active {
  background: blueviolet !important;
  animation: move 1s infinite;
  -webkit-animation: move 1s infinite;
}

.error {
  background: red !important;
}

@keyframes move {
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
  }
}